<template>
	<view class="content">
		<!-- 顶部区域 -->
		<u-navbar :bgColor="bgColor" placeholder fixed height="90">
			<view class="u-nav-slot" slot="left">
				<text class="c-f-b">首页</text>
			</view>
		</u-navbar>
		<!-- 轮播图区域 -->
		<u-swiper class="swiper" :list="list1" autoplay circular></u-swiper>
		<!-- 图标导航区域 -->
		<view class="icon-nav">
			<navigator class="icon-item" url="./running">
				<image src="../../static/imgs/index-paobu.png"></image>
				<text>跑步</text>
			</navigator>
			<navigator class="icon-item" url="./yoga">
				<image src="../../static/imgs/index-yujia.png"></image>
				<text>瑜伽</text>
			</navigator>
			<navigator class="icon-item" url="./liver">
				<image src="../../static/imgs/index-zhibo.png"></image>
				<text>直播</text>
			</navigator>
			<navigator class="icon-item" url="./more">
				<image src="../../static/imgs/index-more.png"></image>
				<text>更多</text>
			</navigator>
		</view>
		<!-- 热门视频 -->
		<view class="hot-video">
			<CommonNav name="热门视频"></CommonNav>
			<!-- 视频内容区域 -->
			<view class="video-content">
				<view class="video">
					<video class="videoStyle" id="demoVideo"
						src="http://114.55.8.17:8000/static/file/%E4%B8%BE%E9%87%8D%E5%A4%B1%E8%AF%AF%E9%9B%86%E9%94%A6.mp4">
					</video>
				</view>
				<view class="c-f-r">马甲线养成</view>
			</view>
			<view class="video-content">
				<view class="video">
					<image src="../../static/imgs/balei.png"></image>
					<image src="../../static/imgs/play.png" class="play"></image>
				</view>
				<view class="c-f-r">妙曼芭蕾舞|国外</view>
			</view>
		</view>
		<!-- 推荐课程-->
		<view class="curriculum">
			<CommonNav name="推荐课程"></CommonNav>
			<view class="curriculum-content">
				<view class="curriculum-item" v-for="item in curriculum" :key="item.id" @click="toCourse(item.id)">
					<image :src="item.img"></image>
					<view class="item-title">
						{{item.name}}
					</view>
					<view class="item-footer">
						<view class="footer-left">
							<image src="../../static/imgs/user-name.png"></image>
							<view class="user-name">{{item.nickName}}</view>
						</view>
						<view class="footer-right">
							{{item.previewNum}}万人练过
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 推荐教练 -->
		<view class="coach">
			<CommonNav name="推荐教练"></CommonNav>
			<view class="coach-content">
				<view class="coach-item" v-for="item in coachList" :key="item.img" @click="toCarsh(item.id)">
					<view class="item-top">
						<u-avatar :src="item.img" size="80"></u-avatar>
					</view>
					<view class="item-bottom">
						<view class="bottom-left">
							<view class="coach-name">{{item.nickname}}</view>
							<view class="coach-address">{{item.birthplace}}</view>
						</view>
						<view class="bottom-right">
							{{item.introduction}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonNav from "@/components/CommonNav.vue"
	import {
		course,
		carsh
	} from "../../api/index.js"
	export default {
		components: {
			CommonNav
		},
		data() {
			return {
				title: 'Hello',
				bgColor: "#000000",
				// 轮播图数据
				list1: [
					'/static/imgs/banner5.png',
					'/static/imgs/banner2.png',
				],
				coachList: [{
						img: "../../static/imgs/coach1.png",
						name: "kris",
						address: "美国洛杉矶",
						desc: "扎尔安格洛夫打职业篮球10年。他多个赛季的得分王，并带领他的团队，是最好的控球后卫之一"
					},
					{
						img: "../../static/imgs/coach2.png",
						name: "kriULISSES JRs",
						address: "加拿大",
						desc: "扎尔安格洛夫打职业篮球10年。他多个赛季的得分王，并带领他的团队，是最好的控球后卫之一"
					}
				],
				curriculum: [{
						img: "../../static/imgs/kc1.png",
						title: "健康有氧运动教程",
						name: "有氧君",
						num: "92.9万人练过"
					},
					{
						img: "../../static/imgs/kc2.png",
						title: "跑后拉伸",
						name: "跑步李",
						num: "27.5万人练过"
					},
					{
						img: "../../static/imgs/kc3.png",
						title: "帕梅拉舞蹈操",
						name: "kiws",
						num: "2.9万人练过"
					},
					{
						img: "../../static/imgs/kc4.png",
						title: "全身肌肉放松",
						name: "mustang",
						num: "9万人练过"
					},
					{
						img: "../../static/imgs/kc5.png",
						title: "颈椎舒缓",
						name: "养生大亨",
						num: "99.9万人练过"
					},
					{
						img: "../../static/imgs/kc5.png",
						title: "每日体态",
						name: "挺住别胖",
						num: "90.5万人练过"
					}
				]
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onShow() {
			this.getCourseList()
			this.getCoarshList()
		},
		methods: {
			// 获取推荐课程列表
			getCourseList() {
				course().then(res => {
					this.curriculum=res.data.records
				})
			},
			// 获取教练列表数据
			getCoarshList(){
				carsh().then(res=>{
					this.coachList=res.data
					console.log(res)
				})
			},
			toCourse(id){
				uni.navigateTo({
					url:'/pages/my/courseDetail?id='+id
				})
			},
			// 跳转到教练详情页面
			toCarsh(id){
				uni.navigateTo({
					url:'./coash?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-nav-slot {
		font-size: 46rpx;
		font-weight: bold;
	}

	.content {
		height: 100%;
		background-color: #000000;
		overflow-y: auto;
		padding: 0 52rpx;

		.icon-nav {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 40rpx 0;

			.icon-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.hot-video {
			.video-content {
				margin: 40rpx 0;

				.video {
					position: relative;

					image {
						width: 100%;
						height: 250rpx;
						margin-bottom: 20rpx;
					}

					.play {
						position: absolute;
						top: 40%;
						left: 50%;
						width: 40rpx;
						height: 40rpx;
					}
				}

			}
		}

		.curriculum {
			.curriculum-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin: 40rpx 0;

				.curriculum-item {
					margin-bottom: 40rpx;

					image {
						width: 300rpx;
						height: 260rpx;
					}

					.item-title {
						margin: 30rpx 0;
						font-size: 30rpx;
					}

					.item-footer {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.footer-left {
							display: flex;
							align-items: center;

							image {
								width: 27rpx;
								height: 33rpx;
							}

							.user-name {
								margin-left: 10rpx;
							}
						}

						.footer-right {
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.coach {
			.coach-content {
				.coach-item {
					margin: 40rpx 0;
					padding: 40rpx;
					border-radius: 30px;
					border: 1px solid #000000;
					background: #262626;

					.item-bottom {
						display: flex;
						align-items: center;

						.bottom-left {
							flex: 1;
							text-align: center;

							.coach-name {
								margin-bottom: 20rpx;
							}
						}

						.bottom-right {
							flex: 2;
							line-height: 30rpx;
						}
					}
				}
			}

		}
	}

	.videoStyle {
		width: 100%;
	}
</style>
